<template>
    <div>
        <div class="get">
            <div>
                   <h3>你将获得</h3>
                   <span><em></em>咨询课程</span>
            </div>
            <p><i></i> 掌握某些知识点</p>
            <p><i></i>学会某些技巧（或思路）</p>
        </div>
        <div class="service">
            <h3>教学服务</h3>
            <div><span>1v1专属答疑服务</span><em>BAT专家面试辅导</em></div>
        </div>
        <div class="introduce">
            <h3>讲师介绍</h3>
            <img src="../../public/img/introduce.png" alt="">
        </div>
        <div class="details">
            <h3>课程详情</h3>
            <img src="https://10.idqqimg.com/qqke_course_info/ajNVdqHZLLCmmSomclDKtIZbXbdvDicMccvUib0miaBDdHX5qAFU3rd2g4oBAOp04th5BwCWPo7ItQ/" alt="">
        </div>
        <div>
            
        </div>
    </div>
</template>
<script>
export default{
    name:'introduce'
}
</script>
<style lang="less" scoped>
    div{
        width: 790px;
        .get{
            div{
                display: flex;
                padding: 36px 0 24px 0;
                justify-content: space-between;
                h3{
                    font-size: 18px;
                    padding: 0;
                }
                span{
                    display: inline;
                    width: 80px;
                    height: 20px;
                    border-radius: 10px;
                    background-color: #f5f6f7;
                    color: #667280;
                    font-size: 12px;
                    line-height: 20px;

                    em{
                        width: 12px;
                        height: 12px;
                        display: inline-block;
                        background-color: #2080f7;
                        border-radius: 6px;
                    }
                }
            }
            p{
                color: #666c80;
                font-size: 14px;
                line-height: 30px;
                i{
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    border-radius: 2.5px;
                    background-color: #666c80;
                    margin-right: 5px;
                }

            }
        }
        .service{
            h3{

                  padding: 36px 0 24px 0;
                    font-size: 18px;
            }
            div{
                // width: 780px;
                // height: 74px;
                padding: 24px 20px;
                border: 1px solid #f5f7fa;
                border-radius: 12px;
                 font-size: 14px;
                color: #667280;
                em{
                   margin-left: 250px;
                }
            }
          
        }
        .introduce{
            h3{
                 padding: 36px 0 24px 0;
                    font-size: 18px;
            }
            img{
                width: 820px;
            }
        }
        .details{
            h3{
                 padding: 36px 0 24px 0;
                    font-size: 18px;
            }
            img{
                width: 780px;
            }
            
        }
        
    }
</style>